<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="账册备案料号" prop="record_material_no" label-width="100px">
        <el-input
          v-model="queryParams.record_material_no"
          placeholder="请输入账册备案料号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="条形码" prop="barcode" label-width="100px">
        <el-input
          v-model="queryParams.barcode"
          placeholder="请输入条形码"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="海关编码" prop="g_code" label-width="100px">
        <el-input
          v-model="queryParams.g_code"
          placeholder="请输入海关编码"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="海关备案商品名称" prop="g_name" label-width="130px">
        <el-input
          v-model="queryParams.g_name"
          placeholder="请输入海关备案商品名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-action="'account@importAccount'"
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="openImport"
        >账册导入
        </el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="币制编码">
              {{ getJson(scope.row.currency_code,1) }}
            </el-form-item>
            <el-form-item label="计量单位">
              {{ scope.row.unit }}
            </el-form-item>
            <el-form-item label="法定计量单位">
              {{ getJson(scope.row.unit1,3) }}
            </el-form-item>
            <el-form-item label="法定计量数量">
              {{ scope.row.qty1 }}
            </el-form-item>
            <el-form-item label="法定第二计量单位">
              {{ getJson(scope.row.unit2,3) }}
            </el-form-item>
            <el-form-item label="法定第二计量数量">
              {{ scope.row.qty2 }}
            </el-form-item>
            <el-form-item label="净重（KG）">
              {{ scope.row.net_weight }}
            </el-form-item>
            <el-form-item label="毛重（KG）">
              {{ scope.row.gross_weight }}
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column label="账册备案料号" align="center" prop="record_material_no" width="100" />
      <el-table-column label="条形码" align="center" prop="barcode" width="120" />
      <el-table-column label="海关编码" align="center" prop="g_code" width="120" />
      <el-table-column label="海关备案品名" align="center" prop="g_name" width="200" :show-overflow-tooltip="true" />
      <el-table-column label="商品规格" align="center" prop="g_model" :show-overflow-tooltip="true" />
      <el-table-column label="原产国" align="center" prop="origin_country_code" width="80">
        <template v-slot="scope">
          {{ getJson(scope.row.origin_country_code,2) }}
        </template>
      </el-table-column>
      <el-table-column label="贸易国" align="center" prop="trade_country_code" width="80">
        <template v-slot="scope">
          {{ getJson(scope.row.trade_country_code,2) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template v-slot="scope">
          <el-button
            v-action="'account@update'"
            size="mini"
            type="primary"
            @click="edit(scope.row)"
          >修改
          </el-button>
          <el-button
            v-action="'account@delete'"
            size="mini"
            type="danger"
            @click="del(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="getList"
    />
    <!-- 修改 -->
    <Edit :open.sync="open" :form="form" @getList="getList" />
    <!-- 账册导入 -->
    <el-dialog v-loading="export_loading" title="物流导入" :visible.sync="export_open" width="800px" append-to-body>
      <el-form ref="form" label-width="80px">
        <el-form-item label="模板下载">
          <el-button type="primary" size="mini" @click="downTemplate">点击下载</el-button>
        </el-form-item>
        <el-form-item label="上传文件">
          <el-upload
            ref="upload"
            class="upload-demo"
            :headers="importHeaders"
            :action="url.import"
            :on-success="handleSuccess"
            :on-change="handleImport"
            :file-list="fileList"
            :multiple="false"
            :auto-upload="false"
            :limit="1"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          >
            <el-button size="mini" type="success">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传csv/xlsx/xls文件</div>
          </el-upload>
        </el-form-item>
        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitUpload">导 入</el-button>
            <el-button size="medium" @click="export_open = false">关 闭</el-button>

          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// import { list } from '@/api/order'
import { downTemplate } from '@/api/order'
import { accountList, accountEdit, accountDel } from '@/api/account'
import { mapGetters } from 'vuex'
import { permission } from '@/directive/permission/index.js' // 权限判断指令
import Edit from './Edit'
export default {
  name: 'Index',
  directives: { permission },
  components: {
    Edit
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      export_loading: false,
      // 总条数
      total: 0,

      // 表格数据
      list: [],
      form: {},
      // 是否显示弹出层
      open: false,
      export_open: false,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10,
        record_material_no: undefined,
        barcode: undefined,
        g_code: undefined,
        g_name: undefined
      },
      importHeaders: { authorization: 'Bearer ' + this.token },
      url: {
        import: ''
      },
      fileList: [],
      ids: []
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      const that = this
      this.loading = true
      // console.log(this.currencyJson)
      accountList(this.queryParams).then(response => {
        if (response.code === 10000) {
          that.list = response.data
          that.total = response.count
          that.loading = false
        }
      })
    },
    /** 修改 **/
    edit(row) {
      const that = this
      that.loading = true
      accountEdit({ id: row.id, type: 1 }).then(response => {
        that.loading = false
        if (response.code === 10000) {
          that.form = response.data
          that.open = true
        }
      })
    },
    /** 删除 */
    del(row) {
      const that = this
      that.$confirm('是否删除账册' + row.record_material_no, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.loading = true
        accountDel({ id: row.id.toString() }).then(response => {
          that.loading = false
          if (response.code === 10000) {
            that.$message.success(response.message)
            that.getList()
          } else {
            that.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        record_material_no: undefined,
        barcode: undefined,
        g_code: undefined,
        g_name: undefined
      }
      this.handleQuery()
    },
    // 打开导入弹窗
    openImport() {
      this.export_open = true
    },
    // 导入提交
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 下载模板
    downTemplate() {
      const that = this
      downTemplate({ name: 'account' }).then(response => {
        if (response.code === 10000) {
          window.open(response.data.url)
        } else {
          that.$message.error(response.message)
        }
      })
    },
    // 导入成功提示
    handleSuccess(response, file, fileList) {
      console.log(response)
      if (response.code === 10000) {
        this.$message.success(response.message)
        this.export_open = false
      } else {
        this.$message.error(response.message)
      }
    },
    // 打开导入弹窗
    handleImport() {
      this.importHeaders.authorization = 'Bearer ' + this.token
      this.url.import = process.env.VUE_APP_BASE_API + '/account/importAccount'
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      // this.ids = selection.map(item => item.orderId)
      // this.multiple = !selection.length
    }
  }
}
</script>
